<template>
  <div id="app">
    <div class="navIcon">
      <img class="navIconImg" src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/jjbanner.9f65b08.png">
    </div>
    <div class="home_icon_down">
      <img class="home_ybg" src="../../images/home_ybg.png">
      <div class="jj_div">
        <div class="jj_name_div">
          <div class="jj_title">
            AI家庭整体解决方案
          </div>
          <div class="jj_titleBg"></div>
          <div class="jj_title_co">
            寻朴房智能家居平台，从安全、健康、便利、节能的角度，结合智能安全、智能生活、智能家电等产品，<br>
            通过云平台的综合智能分析，从整体上提供高品质生活的解决方案。
          </div>
        </div>
        <div class="jj_div_bott">
          <img class="jj_div_img" src="http://xunpfimg.oss-cn-beijing.aliyuncs.com/img/jjbeijing.814a6cd.png">
          <div class="jj_div_bott_le">
            <a class="jj_divlea" v-for="(item,index) in listdata" @click="leftNav(index)" v-if="index<4">
              <div class="jj_leftNav">
                <div class="jj_leftNavitem" :class="{jj_leftNavitem2:index==num}">
                  <span class="jj_leftNavitemSpan " :class="{jj_leftNavitemSpan2:index==num}">{{item.name}}</span>
                </div>
                <div class="jj_leftNavitem" :class="{jj_leftNavitem2:index==num}">
                  <span class="jj_leftNavitemSpan " :class="{jj_leftNavitemSpan2:index==num}">解决方案</span>
                </div>
                <img class="jj_leftNavitemImg" v-if="index==0" src="../../images/jj1.png"/>
                <img class="jj_leftNavitemImg" v-if="index==1" src="../../images/jj2.png"/>
                <img class="jj_leftNavitemImg" v-if="index==2" src="../../images/jj3.png"/>
                <img class="jj_leftNavitemImg" v-if="index==3" src="../../images/jj4.png"/>
              </div>
            </a>
          </div>
          <div class=" jj_div_bott_right">
            <a class="jj_divlea" v-for="(item,index) in listdata" @click="leftNav(index)" v-if="index>3">
              <div class="jj_leftNav">
                <div class="jj_leftNavitem" :class="{jj_leftNavitem2:index==num}">
                  <span class="jj_leftNavitemSpan " :class="{jj_leftNavitemSpan2:index==num}">{{item.name}}</span>
                </div>
                <div class="jj_leftNavitem" :class="{jj_leftNavitem2:index==num}">
                  <span class="jj_leftNavitemSpan " :class="{jj_leftNavitemSpan2:index==num}">解决方案</span>
                </div>
                <img class="jj_leftNavitemImg3" v-if="index==4" src="../../images/jj5.png"/>
                <img class="jj_leftNavitemImg3" v-if="index==5" src="../../images/jj6.png"/>
                <img class="jj_leftNavitemImg2" v-if="index==6" src="../../images/jj7.png"/>
                <img class="jj_leftNavitemImg2" v-if="index==7" src="../../images/jj8.png"/>
              </div>
            </a>
          </div>

          <div class="jj_cLin1">
            <div class="jj_cLinw" :class="{jj_cLin1w2:num==0}"></div>
            <div class="jj_cLinLIn" :class="{jj_cLin1w2:num==0}"></div>
            <div class="jj_cLinyuan" :class="{jj_cLin1w2:num==0}"></div>
          </div>

          <div class="jj_cLin2">
            <div class="jj_cLinw" :class="{jj_cLin1w2:num==1}"></div>
            <div class="jj_cLinLIn" :class="{jj_cLin1w2:num==1}"></div>
            <div class="jj_cLinyuan" :class="{jj_cLin1w2:num==1}"></div>
          </div>

          <div class="jj_cLin3">
            <div class="jj_cLinw" :class="{jj_cLin1w2:num==2}"></div>
            <div class="jj_cLinLIn" :class="{jj_cLin1w2:num==2}"></div>
            <div class="jj_cLinyuan" :class="{jj_cLin1w2:num==2}"></div>
          </div>

          <div class="jj_cLin4">
            <div class="jj_cLinw" :class="{jj_cLin1w2:num==3}"></div>
            <div class="jj_cLinLIn" :class="{jj_cLin1w2:num==3}"></div>
            <div class="jj_cLinyuan" :class="{jj_cLin1w2:num==3}"></div>
          </div>

          <div class="jj_cLin5">
            <div class="jj_cLinw" :class="{jj_cLin1w2:num==4}"></div>
            <div class="jj_cLinLIn" :class="{jj_cLin1w2:num==4}"></div>
            <div class="jj_cLinyuan" :class="{jj_cLin1w2:num==4}"></div>
          </div>

          <div class="jj_cLin6">
            <div class="jj_cLinw" :class="{jj_cLin1w2:num==5}"></div>
            <div class="jj_cLinLIn" :class="{jj_cLin1w2:num==5}"></div>
            <div class="jj_cLinyuan" :class="{jj_cLin1w2:num==5}"></div>
          </div>
          <div class="jj_cLin7">
            <div class="jj_cLinw" :class="{jj_cLin1w2:num==6}"></div>
            <div class="jj_cLinLIn" :class="{jj_cLin1w2:num==6}"></div>
            <div class="jj_cLinyuan" :class="{jj_cLin1w2:num==6}"></div>
          </div>
          <div class="jj_cLin8">
            <div class="jj_cLinw" :class="{jj_cLin1w2:num==7}"></div>
            <div class="jj_cLinLIn" :class="{jj_cLin1w2:num==7}"></div>
            <div class="jj_cLinyuan" :class="{jj_cLin1w2:num==7}"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "navhouse",
    data() {
      return {
        listdata: [
          {"name": "智能对讲"},
          {"name": "智能安防"},
          {"name": "智能监控"},
          {"name": "智能门锁"},
          {"name": "触控面板"},
          {"name": "智能影院"},
          {"name": "背景音乐"},
          {"name": "智能家电"},
        ],
        num: 0
      }
    },
    methods: {
      leftNav: function (num) {
        var _this = this;
        _this.num = num
      }
    },
    mounted() {
    }
  }
</script>
